<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>开店管家</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				background-color: #F3F4F6;
			}
			.header{
				width: 100%;
				box-sizing: border-box;
			}
			.paster{
				width: 100%;
				height: 11.25rem;
			}
			.main{
				width: 100%;
				position: relative;
				top: -1.25rem;
				z-index: 100;
				padding: 0 1.25rem;
				box-sizing: border-box;
			}
			.form{
				min-height: 5rem;
				background-color: #66ccff;
				box-sizing: border-box;
				padding: 1.25rem;
				background-color: #FFF;
			}
			.from-title{
				font-size: 1rem;
				color:#1f1f1f;
				text-align: center;
				padding-bottom: 1.375rem;
				white-space: nowrap;
			}
			.form-cell{
				padding-bottom: 1rem;
			}
			.form-cell input{
				position: relative;
				display: block;
				box-sizing: border-box;
			    width: 100%;
			    padding: .375rem .75rem;
			    font-size: .8125rem;
			    line-height: 2;
			    color: #495057;
			    background-color: #fff;
			    background-clip: padding-box;
			    border: 1px solid #ced4da;
			    border-radius: .25rem;
			    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
			}
			.form-code{
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			#code-btn{
				display: flex;
				padding: 0 1.25rem;
				align-items: center;
				justify-content: center;
				font-size: .75rem;
				line-height: 2;
				white-space: nowrap;
				color:#4a90e2;
				cursor: pointer;
			}
			.btn{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: .75rem;
				font-size: .8rem;
				border-radius: 1.25rem;
				background-color: #4A90E2;
				height: 2.5rem;
				box-sizing: border-box;
				color: #FFFFFF;
			}
			.mt-1{
				margin-top: 1rem;
			}
			.error-input{
				color: red !important;
			}
			.error-input::after{
				content: "";
				display: block;
				width: 1rem;
				height: 1rem;
				position: absolute;
				right: .5rem;
				top: 50%;
				margin-top: -0.5rem;
				background-color: red;
				z-index: 100;
			}
			#invitecode{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header">
				<img class="paster" src="./img/banner.png" alt="加载失败!" />
			</div>
			<div class="main">
				<div class="form">
					<div class="from-title">推荐人:<span id="invitecode"></span></div>
					<div class="form-cell">
						<input type="text" id="phone" value="" placeholder="请输入您的手机号码" />
					</div>
					<div class="form-cell form-code">
						<input type="text" id="code" value="" placeholder="6位短信验证码" />
						<span data-disabled = "on" id="code-btn">获取验证码</span>
					</div>
					<div class="form-cell">
						<input type="password" id="login_password" value="" placeholder="请输入6-16位登录密码" />
					</div>
					<div class="form-cell">
						<input type="password" id="pay_password" value="" placeholder="请输入6位支付密码" />
					</div>
					<div class="form-cell  mt-1">
						<span class="btn"  id="regiter">立即注册</span>
					</div>
					<div class="form-cell">
						<span class="btn" id="download">立即下载</span>
					</div>
					
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript">

			window.apiUrl = `http://xijingpay.com/v1.0`;
			// window.apiUrl = `http://192.168.13.123:8080/v1.0`;
			window.IOSUrl = `https://www.pgyer.com/KaiDIanGuanJia_ios`;
			window.AndroidUrl = `https://www.pgyer.com/KaiDIanGuanJia_android`;

			(function ($) {
			    $.getUrlParam = function (name) {
			        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			        var r = window.location.search.substr(1).match(reg);
			        if (r != null) return unescape(r[2]); return null;
			    }
			})(jQuery);
			
			
			// rem自适应
			(function (doc, win) {
			  var docEl = doc.documentElement;
			  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
			  var recalc = function () {
			    var clientWidth = docEl.clientWidth;
			    if (!clientWidth) return;
			    if (clientWidth > 640) clientWidth = 640;
			    docEl.style.fontSize = clientWidth / 23.4375 + 'px';
			  };
			  if (!doc.addEventListener) return;
			  win.addEventListener(resizeEvt, recalc, false);
			  doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
			
			
		</script>
		<script type="text/javascript">
			let globel_phone = null;
			let brand_id = $.getUrlParam("brand_id");
			let invitecode = $.getUrlParam("phone");
			$('#invitecode').html(invitecode);
			// 手机号验证
			$("#phone").blur(function(){
				let value = $(this).val();
				if(!/^1[1-9][0-9]\d{4,8}$/.test(value)){
					$(this).addClass('error-input')
				}else{
					$(this).removeClass('error-input')
				}
			})
			
			// 验证码事件
			$('#code-btn').click(function(){
				let phone = $("#phone").val();
				if(!/^1[1-9][0-9]\d{4,8}$/.test(phone)){
					alert("手机号格式有误！");
					return;
				}
				if($('#code-btn').data('disabled') == 'off'){
					return;
				}
				getCode(phone);
				
				$('#code-btn').data('disabled',"off");
				$('#code-btn').text("60s后重新获取");
				let seconds = 60;
				let timer = null;
				timer = setInterval(function(){
					if(seconds === 0){
						$('#code-btn').data('disabled',"on");
						$('#code-btn').text("重新获取");
						clearInterval(timer);
					}else{
						seconds--;
						$('#code-btn').text( seconds+"s后重新获取");
					}
				},1000);
			})
			
			// 获取验证码
			function getCode(phone){
				
				globel_phone = phone;
				let url = window.apiUrl + "/notice/sms/send?type=5&phone=" + globel_phone + "&brand_id=" + brand_id;
				$.ajax({
					type:"get",
					url,
					async:true,
					success:function(res){
						// console.log(res);
						if(res.data.resp_code === '000000'){
							alert("发送验证码成功！");
						}else{
							alert(res.data.resp_message);
						}
						
					},
					error:function(err){
						alert("获取验证码失败！");
					}
				});
			}
			
			// 下载
			$('#download').click(function(){	
       		   var u = navigator.userAgent;
		       var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		       if(isAndroid){
		         // 安卓
		        //  console.log('安卓下载');
				 window.location.href = window.AndroidUrl; 
		       }else{
		         // IOS
		        //  console.log('IOS下载'); 
				 window.location.href = window.IOSUrl;
		       }
		       
			})
			
			// 注册
			$('#regiter').click(function(){	
				if(!invitecode){
					alert("推荐人手机号为空！");
					return;
				}		
				if(!brand_id){
					alert("贴牌不能为空！");
					return;
				}
				let phone = globel_phone;
				let vericode = $("#code").val();
				let password = $("#login_password").val();
				let paypass = $('#pay_password').val();
				let url = window.apiUrl + "/user/register";
				if(check(phone,vericode,password,paypass)){	
					// 注册
					let data = {
						phone,
						vericode,
						password,
						paypass,
						brandId:brand_id,
						invitecode
					}
//					console.log('注册',data);
					$.ajax({
						type:"post",
						url,
						data,
						async:true,
						success:function(res){
							if(res.resp_code === "000000"){
								alert("注册成功！快去下载app，享受极致服务吧！")
							}else{
								alert(res.resp_message)
							}
						},
						error:function(err){
							alert("注册请求失败！");
						}
					});
					
				} 
				
			})
			
			// 验证
			function check(phone,code,password,paypass){
				
				if(!/^1[1-9][0-9]\d{4,8}$/.test(phone)){
					alert("手机号格式有误！");
					return false;
				}
				if(code===null||code===''){
					alert("请填写验证码！");
					return false;
				}
				if(password===null||password===''){
					alert("登录密码格式有误！");
					return false;
				}
				if(paypass===null||paypass===''){
					alert("支付密码格式有误！");
					return false;
				}
				return true;
			}
			
		</script>
	</body>
</html>
